<script setup>
import { useSubjectStore } from '@/stores'
import { ref } from 'vue'
const subjectStore = useSubjectStore()
const isadverse = ref(false)
const adverse = ref({})
const options = [
  {
    value: 0,
    label: '否'
  },
  {
    value: 1,
    label: '是'
  }
]
const setAdverse = (data) => {
  subjectStore.setAdverse(data).then((code) => {
    if (code === true) {
      subjectStore.getAdverse(data.id)
      subjectStore.getAE(data.id)
      subjectStore.getSAE(data.id)
      subjectStore.getCompletion(data.id)
      ElMessage.success('成功')
    } else {
      ElMessage.error('失败')
    }
  })
}
const addadverse = () => {
  console.log(subjectStore.adverse.length)
  if (subjectStore.adverse.length > 0) {
    subjectStore.getAdverse(subjectStore.id).then(() => {
      subjectStore.adverse[subjectStore.adverse.length - 1].isExitExperiment = 0
      subjectStore.setAdverse(
        subjectStore.adverse[subjectStore.adverse.length - 1]
      )
    })
  }
  adverse.value.id = subjectStore.id
  subjectStore.addAdverse(adverse.value).then((code) => {
    if (code) {
      subjectStore.getAdverse()
      ElMessage.success('成功')
    } else {
      ElMessage.error('失败')
    }
  })
}
</script>
<template>
  <el-table v-if="isadverse" :data="[1]" :style="{ width: '100%' }">
    <el-table-column label="时间">
      <el-input-number v-model="adverse.week" :min="0" :max="6" />
    </el-table-column>
    <el-table-column label="编辑">
      <el-button @click="addadverse">添加</el-button>
    </el-table-column>
  </el-table>
  <el-table :data="subjectStore.adverse" :style="{ width: '100%' }">
    <el-table-column prop="date" label="时间" width="80">
      <template #default="scope"> 第{{ scope.row.week }}周 </template>
    </el-table-column>
    <el-table-column label="患者是否退出实验" width="210">
      <template #default="scope">
        <el-select
          v-model="scope.row.isExitExperiment"
          placeholder="Select"
          size="large"
          style="width: 180px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="在用药期间有无不良事件发生" width="210">
      <template #default="scope">
        <el-select
          v-model="scope.row.isAdverseEvent"
          placeholder="Select"
          size="large"
          style="width: 180px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="在用药期间有无严重不良事件发生" width="210">
      <template #default="scope">
        <el-select
          v-model="scope.row.isSeriousAdverseEvent"
          placeholder="Select"
          size="large"
          style="width: 180px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column>
      <template #header>
        <span>提交</span>
        <el-button
          style="margin-left: 20px"
          @click="
            () => {
              isadverse === true ? (isadverse = false) : (isadverse = true)
            }
          "
          >添加</el-button
        >
      </template>
      <template #default="scope">
        <el-button @click="setAdverse(scope.row)"> 确定 </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
